<template>
    <div class="map-content">
         <div class="map-info">
            <div class="map-info-content" id="gd-map-container">
              <!-- 高德地图容器 -->
              <!-- Loading效果 -->
              <div v-show="mapLoading" class="map-loading">
                <div class="loading-spinner"></div>
                <div class="loading-text">地图加载中...</div>
              </div>
            </div>
         </div>
         
         <!-- 任务人员显示组件 -->
      <TaskPeopleDisplay 
           v-if="map && taskPeople.length > 0"
           :map="map"
           :task-people="taskPeople"
           :show-info-panel="true"
           @person-click="onPersonClick"
           @person-position-updated="onPersonPositionUpdated" />
           
           
         <!-- 任务路线显示组件 -->
         <TaskRouteDisplay 
           v-if="map && task"
           :map="map"
           :task="task"
           :show-task-panel="true" />
    </div>
</template>

<script>
import TaskPeopleDisplay from '@/components/TaskPeopleDisplay/TaskPeopleDisplay.vue';
import TaskRouteDisplay from '@/components/TaskRouteDisplay/TaskRouteDisplay.vue';

export default {
    name: "AllTodoList",
    components: {
      TaskPeopleDisplay,
      TaskRouteDisplay
    },
    data() {
        return {
            map: null,
            mapLoading: true, // 地图加载状态
            // 科技蓝配色配置
            techBlueStyle: {
                bgColor: '#001122',           // 深色背景
                roadMain: '#00aaff',          // 主要道路颜色（亮蓝色）
                roadSecondary: '#0088cc',     // 次要道路颜色
                roadBorder: '#00ffff',        // 道路边框（青色高亮）
                buildingColor: '#003366',     // 建筑物颜色（较暗）
                textColor: '#00ccff',         // 文字颜色
                waterColor: '#002244',        // 水域颜色
                greenColor: '#004422',        // 绿地颜色
                subwayColor: '#0066cc',       // 地铁线路颜色
                subwayStation: '#00aaff'      // 地铁站颜色
            },
            // 地图显示配置
            mapDisplayConfig: {
                showSubway: true,             // 显示地铁线路
                showRoads: true,              // 显示道路
                showBuildings: false,         // 显示建筑物
                showLabels: false,            // 显示标签
                showPOIs: false,              // 显示POI
                showDistricts: false,         // 显示行政区划
                showSatellite: false          // 显示卫星图
            },
            // POI显示配置
            poiConfig: {
                showHospitals: false,          // 显示医院
                showResidential: false,        // 显示小区
                showSchools: false             // 显示学校
            },
            // 存储POI标记
            poiMarkers: {
                hospitals: [],
                residential: [],
                schools: []
            },
            //任务详情信息
            task: {
                task:'1014车有抢修任务',
                taskId:'1',
                taskStart: [108.872263,34.252474], // 添加起点坐标
                taskEnd:[108.946534,34.261359],
                taskCode:'No001',
                taskTrain:{
                    trainNo:'1014',
                    trainPosi: [
                        [108.9475, 34.2600],
                        [108.9470, 34.2605],
                        [108.9468, 34.2610],
                        [108.9466, 34.2612],
                        [108.946534, 34.261359]
                    ]
                }
            },

            // 任务人员数据
            taskPeople: [
                [
                    {
                        name: '张三',
                        lng: "108.94803",
                        lat: '34.26043',
                        status:1
                    }
                ],
                [
                    {
                        name: '张四',
                        lng: "108.94603",
                        lat: '34.25843',
                        status:1
                    }
                ],
                [
                    {
                        name: '赵连继',
                        lng: "108.94603",
                        lat: '34.25855',
                        status:2
                    }
                ]
            ]
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            this.$nextTick(() => {
                // 初始化高德地图
                this.map = new AMap.Map('gd-map-container', {
                    zoom: 12, // 适中的缩放级别
                    center: [108.94703, 34.25943], // 初始化中心点(西安)
                    pitch: 0, // 平面视角
                    viewMode: '2D',
                    showBuildingBlock: false,
                    showLabel: true
                });
                
                // 设置地图显示样式
                this.setMapStyle();
                
                // 监听地图加载完成事件
                this.map.on('complete', () => {
                    this.mapLoading = false;
                  
                });
                
                // 监听地图加载错误事件
                this.map.on('error', () => {
                    this.mapLoading = false;
                });
            });
        },
        
        // 设置地图样式
        setMapStyle() {
            // 先设置基础样式
            this.map.setMapStyle('amap://styles/normal');
            
            // 设置要显示的地图元素
            const features = this.getEnabledFeatures();
            this.map.setFeatures(features);
            
            // 应用科技蓝自定义样式
            this.applyTechBlueStyle();
        },
        
        // 获取启用的功能列表
        getEnabledFeatures() {
            const features = [];
            
            // 始终包含基础元素
            features.push('bg'); // 背景
            
            if (this.mapDisplayConfig.showRoads) {
                features.push('road');
            }
            
            if (this.mapDisplayConfig.showSubway) {
                features.push('subway');
            }
            
            if (this.mapDisplayConfig.showBuildings) {
                features.push('building');
            }
            
            if (this.mapDisplayConfig.showLabels) {
                features.push('point');
            }
            
            return features;
        },
        
        // 应用科技蓝样式
        applyTechBlueStyle() {
            // 生成科技蓝样式JSON
            const styleJson = this.generateTechBlueStyleJson();
            
            // 创建样式字符串
            let styleStr = '';
            styleJson.forEach(style => {
                if (style.stylers && style.stylers.visibility === 'off') {
                    // 隐藏元素
                    styleStr += `${style.featureType} { display: none !important; } `;
                } else if (style.stylers && style.stylers.color) {
                    // 更改颜色
                    const color = style.stylers.color;
                    if (style.featureType === '.road') {
                        styleStr += `.amap-road { color: ${color} !important; fill: ${color} !important; } `;
                    } else if (style.featureType === '.subway') {
                        styleStr += `.amap-subway { color: ${color} !important; stroke: ${color} !important; } `;
                    } else {
                        styleStr += `${style.featureType} { color: ${color} !important; } `;
                    }
                }
            });
            
            // 应用样式
            if (styleStr) {
                const styleEl = document.createElement('style');
                styleEl.innerHTML = styleStr;
                document.head.appendChild(styleEl);
            }
        },
        
        // 生成科技蓝样式JSON
        generateTechBlueStyleJson() {
            const styleJson = [];
            
            // 设置背景颜色为深蓝
            styleJson.push({
                "featureType": "bg",
                "elementType": "all",
                "stylers": {
                    "color": this.techBlueStyle.bgColor
                }
            });
            
            // 如果不显示建筑物
            if (!this.mapDisplayConfig.showBuildings) {
                styleJson.push({
                    "featureType": ".building",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            } else {
                // 显示建筑物并设置科技蓝颜色
                styleJson.push({
                    "featureType": ".building",
                    "elementType": "all",
                    "stylers": {
                        "color": this.techBlueStyle.buildingColor
                    }
                });
            }
            
            // 如果不显示标签
            if (!this.mapDisplayConfig.showLabels) {
                styleJson.push({
                    "featureType": ".label",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            } else {
                // 显示标签并设置科技蓝文字颜色
                styleJson.push({
                    "featureType": ".label",
                    "elementType": "all",
                    "stylers": {
                        "color": this.techBlueStyle.textColor
                    }
                });
            }
            
            // 如果不显示POI
            if (!this.mapDisplayConfig.showPOIs) {
                styleJson.push({
                    "featureType": ".poilabel",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            }
            
            // 如果不显示行政区划
            if (!this.mapDisplayConfig.showDistricts) {
                styleJson.push({
                    "featureType": ".districtlabel",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
                
                styleJson.push({
                    "featureType": ".district",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            }
            
            // 设置道路颜色为科技蓝
            if (this.mapDisplayConfig.showRoads) {
                styleJson.push({
                    "featureType": ".road",
                    "elementType": "all",
                    "stylers": {
                        "color": "#0e5a65"
                    }
                });
                
                // 主要道路使用更亮的蓝色
                styleJson.push({
                    "featureType": ".road.highway",
                    "elementType": "all",
                    "stylers": {
                        "color": this.techBlueStyle.roadMain
                    }
                });
            } else {
                styleJson.push({
                    "featureType": ".road",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            }
            
            // 设置地铁线路显示
            if (this.mapDisplayConfig.showSubway) {
                styleJson.push({
                    "featureType": ".subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "on",
                        "color": this.techBlueStyle.subwayColor
                    }
                });
                
                // 地铁站使用亮蓝色突出显示
                styleJson.push({
                    "featureType": ".subwaystation",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "on",
                        "color": this.techBlueStyle.subwayStation
                    }
                });
            } else {
                styleJson.push({
                    "featureType": ".subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
                
                styleJson.push({
                    "featureType": ".subwaystation",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                });
            }
            
            // 设置水域颜色
            styleJson.push({
                "featureType": ".water",
                "elementType": "all",
                "stylers": {
                    "color": this.techBlueStyle.waterColor
                }
            });
            
            // 设置绿地颜色
            styleJson.push({
                "featureType": ".green",
                "elementType": "all",
                "stylers": {
                    "color": this.techBlueStyle.greenColor
                }
            });
            
            return styleJson;
        },
        
        // 人员点击事件处理
        onPersonClick(data) {
            console.log('点击了人员:', data.person, '索引:', data.index);
            // 可以在这里处理人员点击事件
        },
        
        // 人员位置更新事件处理
        onPersonPositionUpdated(data) {
            console.log('人员位置更新:', data.person.name, '新位置:', data.position);
            // 可以在这里处理位置更新事件
        },
    },
};
</script>

<style scoped >
.map-content {
    width: 1920px;
    height: 1080px;
    background: url("./imgs/map-bgg.jpg");
    padding: 127px 27px 27px;
    position: relative;
}

.map-info {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.map-info-content {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 地图加载效果 */
.map-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 17, 34, 0.9); /* 深蓝背景 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 102, 204, 0.3); /* 深蓝边框 */
    border-top: 5px solid #00aaff; /* 亮蓝顶部 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #00ccff; /* 青色文字 */
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}
</style>

<style>
/* 科技蓝主题样式 */
.amap-map {
    background: #001122 !important;
}

/* 地图控件样式 */
.amap-toolbar {
    background: rgba(0, 20, 40, 0.8) !important;
    border: 1px solid #00aaff !important;
    border-radius: 4px !important;
}

.amap-toolbar .amap-toolbar-group button {
    background: rgba(0, 60, 120, 0.8) !important;
    color: #00ccff !important;
    border: 1px solid #0088cc !important;
}

.amap-toolbar .amap-toolbar-group button:hover {
    background: rgba(0, 100, 200, 0.8) !important;
}

.amap-scale-control {
    background: rgba(0, 20, 40, 0.8) !important;
    color: #00ccff !important;
    border: 1px solid #00aaff !important;
    border-radius: 4px !important;
}

.amap-marker-label {
    background: rgba(0, 100, 200, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
    border-radius: 3px !important;
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.5) !important;
}

/* 地铁线路科技蓝样式 */
.amap-subway {
    stroke: #0066cc !important;
    fill: #0066cc !important;
}

.amap-subway-station {
    fill: #00aaff !important;
    stroke: #00aaff !important;
}

/* 道路科技蓝样式 */
.amap-road {
    color: #0e5a65 !important;
    fill: #0e5a65 !important;
}

.amap-road-highway {
    color: #00aaff !important;
    fill: #00aaff !important;
}

/* 建筑物科技蓝样式 */
.amap-building {
    fill: #003366 !important;
    stroke: #002244 !important;
}

/* 水域科技蓝样式 */
.amap-water {
    fill: #002244 !important;
}

/* 绿地科技蓝样式 */
.amap-green {
    fill: #004422 !important;
}
</style>